$(function () {
  // http://124.223.14.236:8060/

  // 1.侧边 热门文章
  recommendList()
  function recommendList() {
    $.ajax({
      url: '/index/recommend',
      method: 'GET',
      success: function ({ errno, errmsg, data }) {
        // console.log("data", data)
        if (errno !== 0) return layer.msg(errmsg)
        //5.2-2 侧边--热门文章渲染 
        $('.items-02').append(
          data.list.map(item => {
            return `
            <li>
            <a target="_blank" href="javascript:;">
              <span class="thumbnail">
                <img src="http://124.223.14.236:8060/${item.pic}" class="thumb" />
              </span>
              <span class="text">${item.title}</span>            
            </a>
          </li>       
            `
          }).join('')
        )

      }
    })

  }

  // 2.全局数据渲染（nav区域、广告位、热门标签、友情链接、版权）
  allInfo()
  function allInfo() {
    $.ajax({
      method: 'GET',
      url: '/index/index',
      success: function ({ errno, errmsg, data }) {
        // console.log("data", data)
        if (errno !== 0) return layer.msg(errmsg)
        const { allCate, allLink, allTag, banner, config, showBanner, sideBanner } = data
        // nav 头部导航区域 allCate  渲染
        // 处理无效数据
        const regCN = /[\u4e00-\u9fa5]/g
        const dealCate = allCate.filter(item => {
          return item.id >= 1 && item.id <= 10
        })
        const allCateTpl = dealCate.map(item => {
          return `
          <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="javascript:;" data-id = '${item.id}'><span
          class="fa ${item.icon}"></span>${item.catename.match(regCN) && item.catename !== '' ? item.catename.match(regCN).join('') : item.catename}</a></li>
          `
        }).join('')
        $('.nav').append(allCateTpl)
        $(`.header .container .nav [data-id=${id}]`).parent('li').addClass('current_page_item')


        //  右侧广告位  sideBanner
        $('#sideBanner').html(`
        ${sideBanner.map(item => {
          const { advimgdesc, advimglink, advimgsrc, id } = item
          return ` <a href="${advimglink}" rel="nofollow" target="_blank" title="${advimgdesc}">
          <img class="g430" style="width:360px;height:133px;" src="http://124.223.14.236:8060/${advimgsrc}" alt="${advimgdesc}">
        </a>`
        }).join('')}
        `)

        // 右侧--热门标签区域内容渲染
        const reg = /[\u4E00-\u9FA5]/
        const tags = allTag.filter(function (item) {
          // console.log(reg.test(itemtagname))
          return reg.test(item.tagname) === true
        })
        // console.log("tags", tags)
        $('.widget_tags_inner').html(
          tags.map(item => {
            return `
            <li><a title="" href="javascript:;">${item.tagname}</a></li>
            `
          }).join('')
        )

        //右侧---友情链接区域
        const friendLink = allLink.filter(function (item) {
          return item.default_data === '1' && item.type === '2'
        })
        $('#allLink').html(
          friendLink.map(item => {
            return `
          <li>
          <a href="${item.url}"><img src="http://124.223.14.236:8060/${item.img}" alt="">
            <p>${item.title}</p>
          </a>
        </li>
          `
          }).join('')
        )

        //  // 版权部分 -上
        // 处理有效数据
        const newLink = allLink.filter(function (item) {
          return item.default_data === '1' && item.type === '1'
        })
        // console.log(newLink)

        $('.footer .link').append(
          newLink.map(item => {
            return `
              <a href="${item.url}" title="${item.des}">${item.des}</a> <span>|</span>
            `
          }).join('')
        )
        // 版权----下
        // 处理数据 id53,54,55
        const copyArr = config.allData.filter(item => {
          return item.id >= 53 && item.id <= 55
        })
        $('#copy').html(`
        &copy; 2021 <a href="http://blog.weknow.cn">${copyArr[1].attr_value},</a>
        &nbsp;&nbsp;联系邮箱：${copyArr[2].attr_value}
        &nbsp;&nbsp; <a href="">${copyArr[0].attr_value}</a> 
        `
        )




      }

    })
  }

  // 3.右侧-最新推荐
  hotList()
  function hotList() {
    $.ajax({
      url: '/index/hot',
      method: 'GET',
      success: function ({ errno, errmsg, data }) {
        // console.log(data);
        if (errno) return layer.msg(errmsg)
        const { list } = data
        $('.hotrecommand').html(
          list.map(({ catename, id, lovenum, pic, title }) => {
            return `
            <li class="item"><a target="_blank" href=""><img src="http://124.223.14.236:8060/${pic}"
            class="thumb" />${title}</a></li>`
          }).join('')
        )
        $('.items-01').html(
          list.map(({ catename, id, lovenum, pic, title }) => {
            return `
            <li>
            <a target="_blank" href="javascript:;">
              <span class="thumbnail">
                <img class="thumb" src="http://124.223.14.236:8060/${pic}" />
              </span>
              <span class="text">${title}</span>
              <span class="text-muted post-views">阅读(${lovenum === null ? 0 : lovenum})</span>
            </a>
          </li>`
          }).join('')
        )
      }
    })

  }

  // 4.获取首页本地存储的id 根据分类及id渲染对应的文章列表
  const id = localStorage.getItem('id')
  // console.log("id", id)


  // 5.左侧 文章列表 区域
  let q = {
    page: 1,
    limit: 10,
    cateid: id,
  }
  // 定义全局变量 
  const regCN = /[\u4e00-\u9fa5]/g

  newList()

  function newList() {
    $.ajax({
      method: 'GET',
      url: '/index/list',
      data: q,
      success: function (res) {

        if (res.errno) return layer.msg(res.errmsg)
        const { count, currentPage, pageSize, totalPages, data } = res.data.list
        // console.log("文章列表", data)
        // 5.1渲染 分类标题
        const [{ catename }] = data
        $('.cat-leader').html(`
        <h1>${catename.match(regCN).join('')}</h1>
          <div class="cat-leader-desc"></div>
        `)

        // 5.2-1渲染该分类的文章列表

        const hotArtTpl = data.map(item => {
          // console.log(item.id);
          return `
           <article class="excerpt excerpt-one">
           <header>
           ${item.ishot === 1 ? '<a class="cat label label-important" href="">热门<i class="label-arrow"></i></a>' : ''}
             <h2>
               <a data-id = "${item.id}" href="./show.html" title="${item.title}">${item.title}</a>
             </h2>
           </header>
           <p class="text-muted time">
             <a href="">${item.author}</a> 发布于 ${new Date(item.create_date).toLocaleDateString().replace(/\//g, '-')}
           </p>
           <p class="focus">
             <a target="_blank" href="http://blog.weknow.cn/474.shtml" class="thumbnail">
               <span class="item"><span class="thumb-span"><img src=" http://124.223.14.236:8060/${item.pic}" class="thumb" /></span></span></a>
           </p>
           <p class="note">${item.description !== null ? item.description : ''}</p>
           <p class="text-muted views">
             <span class="post-views">阅读(${item.click})</span>
             <span class="post-comments">评论(0)</span>
             <a href="javascript:;" class="post-like">
               <i class="fa fa-thumbs-up"></i>赞 (<span>${item.lovenum !== null ? item.lovenum : 0}</span>)
             </a>
             <span class="post-tags">标签：
               <a href="" rel="tag">${item.tags !== null && item.tags.match(regCN) ? item.tags.match(regCN).join('') : '未定义'}</a> ${item.keywords !== null ? '|' : ''}
               <a href="" rel="tag">${item.keywords !== null ? item.keywords : ''}</a></span>
           </p>
         </article>
           `
        }).join('')
        $('#article').html(hotArtTpl)

        // 5.2-2 点击文章获取对应的id并进行本地存储
        $('#content').on('click', 'article h2 a', function (e) {
          let showId = $(this).attr('data-id')
          console.log("showId", showId)
          localStorage.setItem('showId', showId)

        })


        // 5.3 渲染分页器
        renderLayPage(count)

      }
    })

  }

  // 6.nav头部导航注册点击事件  获取每个分类对应的id
  $('.header .nav').on('click', 'a', function (e) {
    const id1 = $(this).attr('data-id')
    // console.log("listid", id1)
    localStorage.setItem('id', id1)
    q.cateid = id1
    // console.log(q.cateid);
    newList()
    // 添加当前类
    const old = $(this).parent('li')
    if (old.hasClass('current_page_item')) old.removeClass('current_page_item')
    $(this).parent('li').addClass('current_page_item').siblings().removeClass('current_page_item')
  })
  // 分页器  laypage
  function renderLayPage(total) {
    const laypage = layui.laypage
    //执行一个laypage实例
    laypage.render({
      elem: 'laypage_box', //注意，这里的 laypage_box 是html的分页容器ID名称，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: q.limit,  //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。默认值为10
      curr: q.page,//获取起始页
      layout: ['prev', 'page', 'next', 'count', 'skip'],
      // last: '',
      theme: '#ff5e52',
      // 自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域）
      // limits: [1, 2, 3, 4, 5], //每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
      jump: function (obj, first) {
        //当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
        q.page = obj.curr  //更新查询的参数对象q的页码值
        q.limit = obj.limit
        // console.log(first);  //首次渲染结果为true，人为切换后 结果为undefined
        //首次不执行
        if (!first) {
          //do something
          newList()
        }
      }

    });

  }

  // 6登录注册部分
  const token = localStorage.getItem('Atoken')
  // const token = localStorage.getItem('YOUDIANDA_TOKEN')
  console.log('token', token)

  if (token === '') {
    layer.msg('请先登录')
    return $('.slinks').html(`< a href=" "><i class="fa fa-hand-o-right"></i>&nbsp;登录</ a> |
  <a href="reg.html"><i class="fa fa-registered"></i>&nbsp;注册</ a>`)
  } else {
    $.ajax({
      method: 'POST',
      url: '/user/getUserInfo',
      headers: {
        token: token
      },
      success: function (res) {
        console.log(res);
        const user = res.data.userInfo.username || res.data.userInfo.mobile
        $('.slinks').html(`<a data-v-697ed175="" href="#/user" class="router-link-exact-active router-link-active" aria-current="page">
  <i data-v-697ed175="" class="fa fa-user"></i>&nbsp; 您好${user}，</ a>
   <a data-v-697ed175="" class="fa fa-sign-out"></ a>`)
        $('.user-info .text h3').html(`昵称 ${user}<span><b>个性宣言</b>:${res.data.userInfo.notes ? res.data.userInfo.notes : '走自己的路，让人说去吧'}</span>`)
      }
    })

  }

  // 点击退出登录
  $('.slinks').on('click', '.fa', function () {
    location.href = './login.html'
    localStorage.removeItem('token')
  })





})